<template>
  <view class="index">
    <view class="index-search">
		<u-search
          placeholder="请输入商品关键词"
          bgColor="#ffffff"
          :showAction="false"
		  @click.native="toSearch"
        />
    </view>
    <view class="index-header">
      <u-skeleton rows="1" :loading="loading" :title="false" :rowsHeight="160">
        <u-swiper
          :list="forImageList"
          previousMargin="30"
          nextMargin="30"
          circular
          :indicator="true"
          indicatorStyle="bottom"
          autoplay
          acceleration
          :interval="4000"
          radius="5"
          keyName="icon"
          height="160"
          bgColor="#ebebeb"
					@click="(index) => {toGoodsDetails(index, 'forImageList')}"
        />
      </u-skeleton>
    </view>
    <view v-if="message" class="index-message">
      <u-skeleton :loading="loading" rows="1" :title="false" :rowsHeight="26">
        <u-notice-bar :text="message.name" bgColor="#ea64a2" color="#ffffff" />
      </u-skeleton>
    </view>
    <view class="index-category">
      <u-skeleton :loading="loading" rows="2" :title="false" :rowsHeight="36">
        <u-grid :border="false" align="center">
          <u-grid-item
            v-for="(baseListItem, baseListIndex) in forCategoryList"
            :key="baseListIndex"
            bgColor="#ffffff"
		    @click="toCategory(baseListIndex)"
          >
            <view style="margin: 20rpx;" class="flexColCenter">
              <u--image
                :showLoading="true"
                :src="baseListItem.icon[0].url"
                width="80rpx"
                height="80rpx"
              />
              <text>{{ baseListItem.name }}</text>
            </view>
          </u-grid-item>
        </u-grid>
      </u-skeleton>
    </view>
    <view class="index-hotGoods">
      <u-skeleton :loading="loading" rows="1" :title="false" :rowsHeight="26">
		  <view class="index-hotGoods-header flex">
			  <view class="themeColor flex">
			    <u--image
			      src="/static/image/hotGoods.png"
			      width="40rpx"
			      height="40rpx"
			    />
			    <text class="ml5 fw">热卖推荐</text>
			  </view>
			  <view class="flex fs14" style="color: #909193">
			    <text>更多</text>
			    <u-icon name="arrow-right-double" color="#909193" />
			  </view>
		  </view>
      </u-skeleton>
      <u-gap height="15" />
      <u-skeleton :loading="loading" rows="1" :title="false" :rowsHeight="140" class="index-hotGoods-content">
          <u-scroll-list
            :indicatorWidth="80"
            :indicatorBarWidth="30"
            indicatorActiveColor="#ea64a2"
          >
            <view
              v-for="(item, index) in forGoodsList"
              :key="index"
              class="index-hotGoods-content-item mr20"
							@click="toGoodsDetails(index, 'forGoodsList')"
            >
              <u--image
                :src="item.iconId[0].url"
                width="300rpx"
                height="300rpx"
                radius="15rpx"
              />
              <u-gap height="10" />
              <u--text :lines="1" :text="item.name" />
              <u-gap height="10" />
            </view>
          </u-scroll-list>
      </u-skeleton>
    </view>
    <view class="index-bottomGoodsList">
      <u-divider text="好物推荐"></u-divider>
      <u-skeleton :loading="loading" rows="4" :title="false" :rowsHeight="140">
        <view class="index-bottomGoodsList-list flexWrap">
          <view
            v-for="(item, index) in bottomGoodList"
            :key="index"
            class="index-bottomGoodsList-list-item"
          >
            <Cgoodscard :goods="item" />
          </view>
        </view>
        <u-loadmore
          :status="indexStatus"
          loadmoreText="下拉加载更多"
          loadingText="努力加载中"
          nomoreText="实在没有了"
        />
      </u-skeleton>
    </view>
    <Ctabbar />
  </view>
</template>

<script>
export default {
  name: "Index", // 首页页面
  // options: { styleIsolation: "shared" }, // 父组件设置 options.styleIsolation 可穿透子组件，以及页面
  data() {
    return {
      indexStatus: "loadmore", // 上拉加载组件状态
      loading: true, // 页面加载安装
      listQuery: {
        page: 1, // 页码
        size: 5, // 页面数量
        total: 0, // 总数
        pageNum: 0, // 页数
      },
      // value: '',
      forImageList: [], // 首页商品轮播图
      forGoodsList: [], // 首页热门商品推荐
      forCategoryList: [], // 首页随机分类展示
      message: "", // 首页公告通知

      bottomGoodList: [], // 商品底部列表数据
    };
  },
  onLoad() {
	  uni.hideTabBar(); // 隐藏底部tabbar
  },
  onUnload() {
    console.log("首页页面卸载");
  },
  onShow() {
    this.getList();
  },
  onHide() {
    console.log("首页隐藏");
  },
  // 监听用户下拉动作，一般用于下拉刷新
  onPullDownRefresh() {
    (this.indexStatus = "loadmore"), // 首页下拉加载状态
      (this.loading = true);
    (this.listQuery = {
      page: 1, // 页码
      size: 5, // 页面数量
      total: 0, // 总数
      pageNum: 0, // 页数
    }),
      (this.value = "");
    this.forImageList = []; // 首页商品轮播图
    this.forGoodsList = []; // 首页热门商品推荐
    this.forCategoryList = []; // 首页随机分类展示
    this.message = ""; // 首页公告通知
    this.bottomGoodList = []; // 商品底部列表数据
    this.getList("fresh");
  },
  // 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
  onReachBottom() {
    if (this.listQuery.page === this.listQuery.pageNum) {
      // 已到最后一页
      this.indexStatus = "nomore";
      return;
    }
    this.indexStatus = "loading "; // 开始加载
    this.listQuery.page = this.listQuery.page + 1;
    this.getHomeGoodsList();
  },
  methods: {
    // 初始化
    async getList(type) {
      this.loading = true;
      const data = await Promise.all([
        this.getHomeGetData(),
        this.getHomeGoodsList(),
      ]);
      if (data.length > 0) {
        setTimeout(() => {
          // 延迟渲染
          this.loading = false;
          if (type) {
            // 是否为下拉手势刷新
            uni.stopPullDownRefresh();
            this.showToast("刷新成功");
          }
        }, 400);
      }
    },
    // 获取首页底部列表商品数据
    getHomeGoodsList() {
      return new Promise(async (resolve) => {
        const { code, data } = await this.$home.homeGoodsList(this.listQuery);
        if (code === 0) {
          this.listQuery.total = data.total;
          this.listQuery.pageNum = data.pageNum;
          this.bottomGoodList.push(...data.list);
          this.indexStatus = this.listQuery.page === this.listQuery.pageNum ? 'nomore' : 'loadmore' // 下拉加载判断
          resolve();
        }
      });
    },
    // 获取首页数据
    getHomeGetData() {
      return new Promise(async (resolve) => {
        const { code, data } = await this.$home.homeGetData();
        if (code === 0) {
          this.forImageList = data.forImageList || [];
          this.forGoodsList = data.forGoodsList || [];
          this.forCategoryList = data.forCategoryList || [];
          this.message = data.message || "";

          this.forImageList.forEach((item) => {
            item.icon = item.icon[0].url;
          });
          resolve();
        }
      });
    },
    // 跳转搜索页
    toSearch() {
		console.log('跳转搜索页')
      uni.navigateTo({
        url: "/pages/searchGoods/searchGoods",
        animationType: "pop-in",
        animationDuration: 200,
      });
    },
		// 商品分类点击宫格回调
		toCategory(index) {
			uni.navigateTo({
        url: `/pages/goodsList/goodsList?categoryTwoId=${this.forCategoryList[index].id}`,
        animationType: "pop-in",
        animationDuration: 200,
      });
		},
		// 轮播图||热卖商品 点击回调
		toGoodsDetails(index, target) {
			uni.navigateTo({
		  	url: `/pages/goodsDetails/goodsDetails?goodsId=${this[target][index].id}`,
		  	animationType: 'pop-in',
		  	animationDuration: 200
		  })
		}
  },
};
</script>

<style lang="scss" scoped>
// 骨架屏占位100%
/deep/ .u-skeleton__wrapper__content__rows {
  width: 100% !important;
}

.index {
  &-search {
    padding: 20rpx 50rpx;
    margin-bottom: 10rpx;
  }
  &-header {
    /deep/ .u-skeleton__wrapper__content {
      padding: 0 40rpx;
    }
  }
  &-message {
    padding: 20rpx;

    /deep/ .u-notice-bar {
      border-radius: 10rpx;
    }
  }

  &-category {
    padding: 20rpx;
  }

  &-hotGoods {
    padding: 20rpx;
  }

  &-bottomGoodsList {
    &-list {
      &-item {
        box-sizing: border-box;
        flex: 0 0 50%;
        padding: 10rpx;
      }
    }
  }
}
/deep/ .index-hotGoods-header{
	justify-content: space-between;
}
/deep/ .index-hotGoods-content{
	&-item {
	  padding: 20rpx;
	  border-radius: 20rpx;
	  background: #ffffff;
	}
	
	/depp/ .u-image {
	  border: 1px solid;
	}
}
</style>
